<template>
  <div class="box">
    <header class="header">detail</header>
    <div class="content">
      <div class="banner" @click="previewImages">
        <van-swipe class="my-swipe" :autoplay="3000" indicator="white">
          <van-swipe-item v-for="(item,index) of images" :key="index">
            <van-image height="375px" width="300px" :src="item" fit="fill" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="info">
        <div class="price">￥{{ price }}</div>
        <div class="title">
          <h3>
            <van-tag type="danger">{{ brand }}</van-tag>- {{ proname }}
          </h3>
        </div>
        <div class="desc van-multi-ellipsis--l3">{{ desc }}</div>
      </div>
      <van-goods-action safe-area-inset-bottom>
        <van-goods-action-icon icon="chat-o" text="客服" dot />
        <van-goods-action-icon icon="cart-o" text="购物车" badge="5" @click="$router.push('/cart')" />
        <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
        <van-goods-action-button type="warning" text="加入购物车" @click="addCartFn" />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>
  </div>
</template>

<style scoped lang='scss'>
.banner {
  height: 3.75rem;
  overflow: hidden;
  .my-swipe {
    height: 3.75rem;
    overflow: hidden;

  }
}
</style>
<script>
import { getProDetailData, addCart } from './../../api'
import Vue from 'vue'
import { Image as VanImage, ImagePreview, Swipe, SwipeItem, GoodsAction, GoodsActionIcon, GoodsActionButton, Tag, Toast } from 'vant'
Vue.use(VanImage)
Vue.use(ImagePreview)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(GoodsAction)
Vue.use(GoodsActionIcon)
Vue.use(GoodsActionButton)
Vue.use(Tag)
Vue.use(Toast)
export default {
  props: ['proid'],
  data () {
    return {
      // proid: '',
      proname: '',
      price: 0,
      proimg: '',
      desc: '',
      sales: 0,
      stock: 0,
      rating: 0,
      discount: 0,
      category: '',
      brand: '',
      images: [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-1.jpg'
      ]
    }
  },

  components: {},

  computed: {},

  mounted () {
    getProDetailData({
      proid: this.proid
    }).then((res) => {
      console.log(res.data.data.proid)
      // this.proid = res.data.data.proid
      this.proname = res.data.data.proname
      this.price = res.data.data.price
      this.proimg = res.data.data.proimg
      this.desc = res.data.data.desc
      this.sales = res.data.data.sales
      this.stock = res.data.data.stock
      this.rating = res.data.data.rating
      this.discount = res.data.data.discount
      this.category = res.data.data.category
      this.brand = res.data.data.brand
      this.images.unshift(this.proimg)
    })
  },

  methods: {
    previewImages () {
      ImagePreview(this.images)
    },
    addCartFn () {
      if (localStorage.getItem('loginState') === 'true') {
        console.log(this.proid)
        addCart({
          userid: localStorage.getItem('userid'),
          proid: this.proid,
          num: 1
        }).then(res => {
          if (res.data.code === '10030') {
            Toast('没有找到该商品')
          } else if (res.data.code === '10032') {
            Toast('库存不足')
          } else {
            Toast('加入购物车成功')
          }
        })
      } else {
        this.$router.push('/login')
      }
    }
  }
}
</script>
